<template>
  <page>
    <template v-slot:header>
      <h2>
        <i class="icon iconfont">&#xe611;</i>
        <span>{{ $t("configure.test_verification") }}</span>
      </h2>
    </template>
    <template v-slot:content>
      <el-dialog
        :title="title"
        :visible.sync="display"
        :before-close="handleClose"
      >
        <create-or-update
          v-if="type === 'create'"
          :libId="$route.params.id"
          :osArch="search_criteria.osArch"
          :osVersion="search_criteria.osVersion"
          @click="handleClose"
        ></create-or-update>
        <issue-host
          @click="handleClose"
          :ids="ids"
          v-else-if="type == 'issue'"
        ></issue-host>
      </el-dialog>
      <ky-table
        :search_data="search_data"
        :getData="getMigrateConfigure"
        :showSelect="showSelect"
        :rowClassName="tableRowClassName"
        :search_criteria="search_criteria"
        ref="table"
      >
        <template v-slot:table-action>
          <authorization-button class="kylin-item-button" @click="handleAdd"
            >{{ $t("configure.add") }}
          </authorization-button>
          <authorization-button
            class="kylin-item-button"
            @click="handleIssue"
            :disabled="$refs.table && $refs.table.selectRow.ids.length == 0"
            >{{ $t("configure.issue") }}
          </authorization-button>
          <authorization-button class="kylin-item-button" @click="handleExport"
            >{{ $t("configure.export_template") }}
          </authorization-button>
        </template>
        <template v-slot:table>
          <el-table-column type="expand">
            <template slot-scope="scope">
              <el-form label-position="left" inline>
                <el-form-item :label="$t('configure.description')">
                  <span>{{ scope.row.description }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column prop="name" :label="$t('configure.configure_name')">
          </el-table-column>
          <el-table-column
            prop="sourceBaseline"
            width="200"
            :label="$t('configure.source_host')"
          >
          </el-table-column>
          <el-table-column
            prop="kylinStandardBaseline"
            :label="$t('configure.kylin_host')"
          >
          </el-table-column>
          <el-table-column
            prop="propose"
            :label="$t('configure.migration_recommendations')"
          >
          </el-table-column>
          <el-table-column :label="$t('configure.migrate_value')" width="300">
            <template slot-scope="scope">
              <div class="migrate-value">
                <div class="value">
                  <span v-if="!scope.row.edit">{{
                    scope.row.migrateBaseline
                  }}</span>
                  <el-input v-else v-model="scope.row.value"></el-input>
                </div>
                <div class="icon">
                  <authorization-button
                    type="text"
                    v-if="!scope.row.edit"
                    slot="reference"
                    size="medium"
                    @click="handleEdit(scope.row)"
                  >
                    <span class="el-icon-edit"></span>
                  </authorization-button>
                  <authorization-button
                    type="text"
                    v-if="scope.row.edit"
                    slot="reference"
                    size="medium"
                    @click="handleSave(scope.row)"
                  >
                    <span class="el-icon-check"></span>
                  </authorization-button>
                  <authorization-button
                    type="text"
                    v-if="scope.row.edit"
                    slot="reference"
                    size="medium"
                    @click="handleCancel(scope.row)"
                  >
                    <span class="el-icon-close right"></span>
                  </authorization-button>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column :label="$t('action')">
            <template slot-scope="scope">
              <el-popconfirm
                :title="$t('configure.compare_delete_confirm')"
                @confirm="handleDelete(scope.row)"
                icon-color="red"
                cancel-button-type="default"
                confirm-button-type="danger"
              >
                <el-button
                  type="text"
                  slot="reference"
                  size="medium"
                  class="kylin-delete"
                >
                  {{ $t("delete") }}
                </el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </template>
      </ky-table>
    </template>
  </page>
</template>

<script>
import Page from "@/components/Page";
import kyTable from "@/components/KyTable";
import CreateOrUpdate from "../../normalLibrary/form/create_or_update.vue";
import {
  getMigrateConfigure,
  deleteMigrateConfigure,
  updateMigrateConfigure,
  downloadMigrateConfigure,
} from "@/api/migrate_diff";
import IssueHost from "./form/issueHost.vue";
import AuthorizationButton from "@/components/AuthorizationButton";
import { download } from "@/utils";
export default {
  components: {
    Page,
    kyTable,
    CreateOrUpdate,
    IssueHost,
    AuthorizationButton
  },
  data() {
    let os_info = this.$route.query.os_info;
    let arr = os_info.split("-");
    let osArch = arr[1];
    let osVersion = arr[0];
    return {
      display: false,
      ids: [],
      showSelect: true,
      search_criteria: {
        sortBy: "id",
        sortOrder: "desc",
        libId: this.$route.params.id,
        osArch,
        osVersion,
      },
      title: "",
      type: "",
      search_data: {
        name: {
          name: "configure.configure_name",
          type: "text",
        },
        sourceBaseline: {
          name: "configure.source_host",
          type: "text",
        },
        kylinStandardBaseline: {
          name: "configure.kylin_host",
          type: "text"
        },
        propose: {
          name: "configure.migration_recommendations",
          type: "text",
        },
        migrateBaseline: {
            name: "configure.migrate_value",
            type: "text",
        }
      },
    };
  },
  methods: {
    getMigrateConfigure,
    async getSelectAllIds() {
      let data = [];
      const res = await getMigrateConfigure({
        ...this.$route.query,
        ...this.search_criteria,
        paged: false,
      });
      res.data.data.results.map((item) => {
        if (!this.$refs.table.selectRow.excludeIds.includes(item.id)) {
            data.push(item.id);
        }
      });
      return data;
    },
    handleClose(type) {
      this.type = "";
      this.display = false;
      this.title = "";
      if (type == "success") {
        this.$refs.table.handleSearch();
      }
    },
    handleAdd() {
      this.type = "create";
      this.display = true;
      this.title = this.$t("configure.add");
    },
    handleEdit(row) {
      this.$set(row, "value", row.migrateBaseline);
      row.edit = true;
    },
    handleSave(row) {
      row.edit = false;
      updateMigrateConfigure({ configId: row.id, value: row.value }).then(
        (res) => {
          if (res.data.code == "0") {
            this.$message({
              type: "success",
              message: res.data.message,
            });
          } else {
            this.$message({
              type: "error",
              message: res.data.message,
            });
          }
          this.$refs.table.handleSearch();
        }
      );
    },
    async handleIssue() {
      this.type = "issue";
      this.display = true;
      this.title = this.$t("configure.issue");
      let ids = [];
      if (this.$refs.table.select_id == "2") {
        ids = await this.getSelectAllIds();
      } else {
        ids = this.$refs.table.selectRow.ids;
      }
      this.ids = ids;
    },
    handleCancel(row) {
      row.edit = false;
      this.$refs.table.handleSearch();
    },
    handleExport() {
      let { libId, osArch, osVersion } = this.search_criteria;
      downloadMigrateConfigure({ libId, osArch, osVersion }).then((res) => {
        if (res.data.code) {
          this.$message({
            type: "error",
            message: res.data.message,
          });
        } else {
          download(res, this.$route.query.libName, "json");
        }
      });
    },
    handleDelete(row) {
      deleteMigrateConfigure({ configIds: [row.id] }).then((res) => {
        if (res.data.code == "0") {
          this.$message({
            type: "success",
            message: res.data.message,
          });
        } else {
          this.$message({
            type: "error",
            message: res.data.message,
          });
        }
        this.$refs.table.handleSearch();
      });
    },
    tableRowClassName(row) {
        if (row.modify) {
          return 'row-modify';
        }
        return '';
      }
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.size {
  width: 134px;
}
.label {
  font-weight: 600;
  margin-right: 10px;
}
.migrate-value {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  > .value {
    width: 50%;
    margin-right: 10px;
  }
  .icon {
    > span {
      cursor: pointer;
    }
  }
}
.right {
  margin-left: 10px;
}
</style>